<template>
  <div>
    <h1>大头儿子</h1>
    <h3>{{ money }}</h3>
    <h3>{{ list }}</h3>
    <ul>
      <li v-for="(item, index) in list" :key="index">
        {{ item.name }}----{{ item.age }}
      </li>
    </ul>
    <button @click="btn">测试props传递过来的数据是否可以改动</button>
  </div>
</template>

<script>
export default {
  name: "",
  /* props父传子  
props的格式
   ①props: ["money", "list"] props只指定了属性名，属性名以字符串的格式放到数组当中
   ②
   props: {
    money: {
      type: String,
    },
    list: {
      type: Array,
    },
  },
  指定了传递过来的值属性名及类型
   ③
   props: {
    money: {
      type: String,
      //   required: true,//要求属性必须传递不传递就会报错
    },
    list: {
      type: Array,
    },
  },

  不要修改props中的值，如果要改动，请在父元素中进行更改（初始值的值在哪里就去哪里更改）
  当改动了props中的值后，基本数据类型会报错，引用数据类型不会报错，但是这种做法违背组件之间传值的单项数据流的概念 不建议这种方式
   
   */
  //   props: ["money", "list"],

  props: {
    money: {
      type: String,
      //   required: true,//要求属性必须传递不传递就会报错
    },
    list: {
      type: Array,
    },
  },
  data() {
    return {};
  },

  components: {},

  computed: {},

  beforeMount() {},

  mounted() {},

  methods: {
    btn() {
      console.log(this.money);
      //   this.money = "200w";
      console.log(this.list);
      this.list[0].age = 25;
    },
  },

  watch: {},
};
</script>
<style lang='' scoped>
</style>